<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>变量的解构赋值</title>
</head>

<body>
  <script>
    /* 
      ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，
      这被称为解构赋值 
    */

    // 1. 数组的结构
    /* 
      const F4 = ['小沈阳', '刘能', '赵四', '宋小宝'];
      let [xiao, liu, zhao, song] = F4;
      console.log(xiao, liu, zhao, song); 
    */

    // 冒泡排序
    // 1.数组解构
    var x = 1,
        y = 2
    
        [x,y] = [y,x]

    // 2.传统方式
    var tmp = x
        x = y
        y = tmp

    // 2. 对象的结构
    const zhao = {
      name: '赵本山',
      age: '不详',
      xiaopin: function() {
        console.log("我可以演小品");
      }
    };

    /* 
      let {name, age, xiaopin} = zhao;
      console.log(name, age, xiaopin);

      xiaopin(); 
    */

    let {xiaopin} = zhao;
    xiaopin();

    // 用逗号作为占位符，可以有选择性的赋值
    [,,z] = [1,2,3]
    console.log(z)

    // 解构的对象必须是可迭代的
    // [x, y] = NaN   // 报错

    // 3.对象解构
    // ({a,b} = {a:1,b:2}); // 报错
    // ({a:a, b:b} = {b:1, a:2}); // 报错
    // console.log(a, b)

    // 方括号包裹动态属性名
    var obj = {preName:"strick"},
        attr = "Name";

        ({["pre" + attr]:value} = obj)
        console.log(obj)

  </script>
</body>

</html>